<template>
  <div class="main-container">
    <div class="main-header">
      <Top></Top>
    </div>
    <div class="content-box">
      <div class="main-nav">
        <Nav :menuList="navList"></Nav>
      </div>
      <div class="main-content">
        <transition name="fade-transform" mode="out-in">
          <router-view :key="key"></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
import Top from '@/components/layout/top.vue'
import Nav from '@/components/layout/nav.vue'
export default {
  components: { Top, Nav },
  data() {
    return {
      isShow: true,
      activeIndex: 'home',
      navList: []
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  created() {
    this.handleRoutes()
    // this.navList = this.$store.getters['routes/GET_Routes']
  },
  methods: {
    handleRoutes() {
      //真正需要的路由都是有children的，只有login和404没有
      let list = []
      let list2 = this.$store.getters['routes/GET_Routes']
      list = list2.filter((item) => {
        return item.name !== 'systemManagement'
      })
      for (let i = 0; i < list.length; i++) {
        if (list[i].children) {
          if (list[i].meta.title == '首页') {
            list[i].children = []
          }
        }
      }
      this.navList = list
    },
    // handleHidden(data){
    //   data.forEach(item={
    //   })
    // },
    handleSelect(key, keyPath) {
      let name = keyPath[keyPath.length - 1]
      this.$router.push({
        name: name
      })
    }
  }
}
</script>
<style scoped lang="scss">
body,
html {
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.main-container {
  width: 100%;
  height: 100%;
}

.content-box {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;

  .main-nav {
    box-sizing: border-box;
    width: 265px;
    height: 100%;
    padding: 12px 0;
    // padding: 12px 0 12px 30px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    // ::v-deep {
    //   .el-menu-vertical-demo .el-menu-item {
    //     background-color: white !important;
    //     background: white;
    //     height: 44px;
    //     line-height: 44px;
    //     font-size: 16px;
    //     font-weight: 500;
    //     letter-spacing: 0px;
    //     color: rgba(38, 38, 38, 1);
    //     padding: 0 0 0 10px !important;
    //     width: 216px;
    //     box-sizing: border-box;
    //     margin: 0 0 10px 0;
    //   }

    //   .el-menu-vertical-demo .is-opened {
    //     background: url('@/assets/拼合图形.png') no-repeat !important;
    //     background-size: 100%;
    //     //padding-left: 10px;
    //     box-sizing: border-box;

    //     .el-submenu__title {
    //       color: rgba(255, 255, 255, 1);
    //     }

    //     .el-menu-item {
    //       margin-bottom: 0;
    //       font-size: 14px;
    //       font-weight: 500;
    //       letter-spacing: 0px;
    //       color: rgba(128, 141, 157, 1);
    //       box-sizing: border-box;
    //       padding-left: 20px !important;
    //     }
    //     .is-active {
    //       color: rgba(23, 131, 245, 0.7) !important;
    //     }
    //     .el-submenu__icon-arrow {
    //       right: 32px;
    //       color: #fff;
    //     }
    //   }

    //   .el-submenu__icon-arrow {
    //     right: 32px;
    //   }

    //   .el-submenu__title {
    //     height: 44px;
    //     width: 216px;
    //     line-height: 44px;
    //     font-size: 16px;
    //     font-weight: 500;
    //     letter-spacing: 0px;
    //     color: rgba(38, 38, 38, 1);
    //     margin-bottom: 10px;
    //     padding: 0 0 0 10px !important;
    //   }

    //   .el-submenu__title:hover {
    //     background: none;
    //   }

    //   .el-menu-vertical-demo .el-submenu {
    //     background: white;
    //   }
    // }
  }

  .main-content {
    box-sizing: border-box;
    // width: 1592px;
    width: calc(100vw - 265px);
    height: 100%;
    border-radius: 6px;
    background-color: rgb(246, 248, 250);
    overflow-y: auto;
    overflow-x: hidden;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
